<template>
  <div class="movie">
    <!-- <div id="header">
      <span class="el-icon-back" @click="goBack()"></span><span class="headerTitle">视频详情</span>
    </div> -->
    <div class="content">
      <p class="left">
        <img :onerror="defaultImg" :src="data.iocnurl==''?img:data.iocnurl"  alt="">
      </p>
      <p class="right">
        <span class="name">{{data.name}}</span>
        <span v-html="newMessage" class="description">{{data.mDescribe}}</span>
      </p>
      <div class="zhijiao">
          <span>
            {{data.typename}}
          </span>
      </div>
    </div>
    <div class="bottom">
       <span class="el-icon-caret-right play" @click="play()"></span> 
       <span class="watch" @click="play()">观看影片</span> 
       <span class="right el-icon-caret-right" @click="play()"></span>
    </div>
    <div class="detail">
      <p v-for="i in data.category" :key="i.id">{{i.name}}</p>
      <!-- <p>{{data.category[1].name}}</p>
      <p>{{data.category[2].name}}</p>
      <p>{{data.category[3].name}}</p>
      <p>{{data.category[4].name}}</p>
      <p>{{data.category[5].name}}</p>
      <p>{{data.category[6].name}}</p>
      <p>{{data.category[7].name}}</p>
      <p>{{data.category[8].name}}</p> -->
      <!-- <p>{{data.category[11].name}}</p> -->
      <!-- <el-button type="success" round @click="play()">立即播放</el-button>
      <el-button type="info" round @click="share()">分享</el-button> -->
    </div>
    <!-- <div style="bottom:0px;position:fixed;width:100%">
      <p style="display:flex;justify-content: space-around;width:100%;">
        <van-button type="primary" >播放</van-button>
        <van-button type="warning" >返回</van-button>
      </p>
    </div> -->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="play" @click="play()">播放</van-tabbar-item>
      <van-tabbar-item icon="add-o" @click="share()">加群</van-tabbar-item>
      <van-tabbar-item icon="arrow-left" @click="goBack()">返回</van-tabbar-item>
    </van-tabbar>
    <!-- 弹窗 -->
    <el-dialog
      :title="data.name"
      :visible.sync="dialogVisible"
      width="100%"
      height='80%'
      :before-close="handleClose">
      <van-tabs v-model="active" swipeable >
        <van-tab v-for="index in num" :title="(index-1)*50+1 +'-'+ index*50" :key="index">
          <p class="buttonBox" >
          <el-button type="primary" @click="playMovie(j.name,j.videoUrl)" v-for="j in data.onlineList.slice((index-1)*50, (index)*50)" :key="j.name" style="width:31%;margin:0px;margin:5px 1%;">{{j.name}}</el-button>
        </p>
        </van-tab>
      </van-tabs>
    </el-dialog>
  </div>
</template>
<script>
import img from '../assets/moren.jpg'
import { getRealPlayUrl } from "../api/getPlayUrl";
import { getDetail } from "../api/getDetail";
export default {
  name: "movie",
  data: function() {
    return {
      dialogVisible: false,
      defaultImg: 'this.src="' + require('../assets/moren.jpg') + '"',
      data: {
        tab:'',
        list: [],
        num: Number,
        category: [
        ],
        episodes: [

        ],
        iocnurl: img,
        mDescribe:
          "火星搜索qq号：2039087821（发  搜-电影名称   可以获取电影资源）。~" +
          "火星搜索qq群：927910315（发  搜-电影名称   可以获取电影资源）。~" +
          "安卓下载地址：http://zhushou.360.cn/detail/index/soft_id/4007020?recrefer=SE_D_火星搜索 (vivo,360,安智,搜索市场，pc6市场均已上架)。~" +
          "火星搜索公众号：~",
        name: "火星搜索",
        onlineList: [
        ],
        source: "www.adbubo.com",
        sourcetype: 1,
        type: 1,
        typename: "电影"
      }
    }
  },
  methods: {
    //加群
    share(){
      window.location.href ='http://shang.qq.com/wpa/qunwpa?idkey=4003542b39a17b4ea33ca35ece50e787ed9fa215ffe62249fcaf8da8c7a5caf9'
    },
    //播放
    playMovie(name,videoUrl) {
      var self = this;
      getRealPlayUrl(videoUrl,localStorage.Imei,this.data.name,name).then(datas => {
        console.log(datas)
        this.$router.push("/play?url=" + datas.data.data+"&name="+this.data.name);
        console.log(datas.data.data);
      });
    },
    //返回
    goBack() {
      window.history.go(-1)
    },
    //播放选择页面
    play() {
      console.log(1111);
      this.dialogVisible = true;
      //alert("您点击了播放按钮！");
    },
    // share() {
    //   alert("您点击了分享");
    // }
  },
  computed: {
    newMessage: function () {
      var str ="";
      var newStr = this.data.mDescribe.split('~');
      for (var i=0;i<newStr.length;i++ ){
        str+=newStr[i] + "</br>"
      }
      return str;
    }
  },
  beforeCreate() {
    this.data=[]
  },
  mounted() {
    var self = this;
    this.name = this.$router.history.current.query.name;
    this.tab = this.$router.history.current.query.key;
    getDetail(this.name,this.tab).then(data => {
      console.log(data);
      if (data.data.data) {
        self.data = data.data.data;
      }
      let num = self.data.onlineList.length;
      self.num = parseInt(num / 50) + 1;
    });
  }
};
</script>
<style scoped>
.movie {
  background: #e5e9f2;
  height: 100%;
  padding-bottom: 50px
}
#header {
  height: 50px;
  line-height: 50px;
  background: #e54847;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
#header span {
  font-size: 26px;
  color: #ffffff;
  font-weight: 500;
  text-indent: 10px;
  line-height: 50px;
  display: inline-block;
  float: left;
  cursor: pointer;
}
#header .headerTitle {
  font-size: 16px;
  line-height: 50px;
  cursor: alias;
  color: #ffffff;
}
.content {
  display: flex;
  justify-content: space-between;
  background: #b4b1b1;
}
.content .left {
  width: 30%;
}
.content .left img {
  width: 100%;
  margin: 5px;
}
.content .right {
  width: 70%;
}
.content .right span {
  display: block;
  width: 85%;
  margin: 0 auto;
}
.content .right .name {
  font-size: 16px;
  line-height: 30px;
  margin-top: 10px;
}
.content .right .description {
  font-size: 12px;
  line-height: 18px;
}
.zhijiao {
  width: 0;
  height: 0;
  border-width: 30px 30px;
  border-style: solid;
  border-color: #ff3300 #ff3300 #b4b1b1 #b4b1b1;
  font-size: 10px;
  float: right;
}
.zhijiao span {
  display: inline-block;
  position: relative;
  top: -32px;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  color: #ffffff;
}
.bottom {
  background: #b4b1b1;
  padding-bottom: 10px;
}
.bottom .play {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #ffffff;
  color: #ffffff;
  background: #000;
  font-size: 18px;
  cursor: pointer;
  margin-left: 5px;
}
.bottom .watch {
  display: inline-block;
  line-height: 30px;
  margin-left: 5px;
  font-size: 16px;
  position: relative;
  top: -2px;
}
.bottom .right {
  float: right;
  line-height: 30px;
  font-size: 24px;
  color: #070606;
  margin-right: 10px;
}
.detail {
  width: 95%;
  margin: 0 auto;
  margin-top: 10px;
  text-align: center;
}
.detail p {
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  color: #303133;
}
.detail button {
  margin: 5px 10px;
}
.buttonBox {
  width: 100%;
  margin: 10px auto;
}
</style>
